<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/userProfiles.css">
    <!--<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>-->
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        //3个标签页的翻页信息
        var tabs = [{currentPage:1,pages:1},{currentPage:1,pages:1},{currentPage:1,pages:1}];
        var currentTab = 0;
        var travels;
        var comments;
        function changeTab(num){
            currentTab = num;
        };
        $(function () {
            //拿到当前登录用户
            var user = sessionStorage.getItem("user");
            user = JSON.parse(user);
            //拿到用户id
            var id = getParams().id;
            //判断是否是自己
            if (id == user.id){
                //隐藏私信和关注按钮
                $("#letterBtn").css("display","none");
                $("#followBtn").css("display","none");
            }
            //是否已关注
            var isFriend;
            //给标签页设置点击事件
            $("#travels-tab").click(function () { //游记
                changeTab(0);
            })
            $("#comments-tab").click(function () {//点评
                changeTab(1);
            })
            //发送贾克斯请求,获取用户信息
            $.get("/users/" + id, function (data) {
                //渲染背景
                $(".bg").css("background-image", "url('" + data.coverImgUrl + "')");
                $(".info").renderValues(data);
            });
            //发送贾克斯请求,获取关注数和粉丝数
            $.get("/users/fans/" + id,function (data) {
                $(".num").renderValues(data);
            });
            //再发送贾克斯请求,获取该用户的游记信息
            $.get("/travels/listForUser/" + id, {currentPage: 1}, function (data) {
                $("#travels-tab span").html(data.total);
                travels = data.list;
                tabs[0].pages = data.pages;
                //渲染游记
                renderView(data,1);
            });
            //又发送贾克斯请求,获取该用户的所有评论
            $.get("/users/" + id + "/comment",{currentPage:1},function (data) {
                $("#comments-tab span").html(data.total);
                comments = data.list;
                tabs[1].pages = data.pages;
                //渲染点评
                renderView(data,2);
            });
            //判断是否已登录
            if (user){
                //如果已经登录,则检查双方好友关系
                $.get("/users/isFriend",{userId:user.id,friendId:id},function (data) {
                    //如果已经关注了该用户
                    //就改变关注按钮的样式和绑定的事件;
                    if (data.success){
                        $("#followBtn").html("取消关注");
                        $("#followBtn").addClass("btn-info");
                        isFriend = "yes";
                    }
                })
            }
            //给 关注 按钮设置点击事件
            $("#followBtn").click(function () {
                //检测是否已登录
                if (user){
                    //检查是否已关注
                    if (isFriend){
                        console.log(user.id);
                        console.log(id);
                        //发送贾克斯请求,取消关注
                        $(document).dialog({
                            type : 'confirm',
                            titleText: '友情提示',
                            content: '是否取消关注??',
                            buttonTextConfirm: '取消关注',
                            buttonTextCancel: '下次再说',
                            onClickConfirmBtn: function(){
                                $.ajax({
                                    url:"/users/deleteFriend/" + user.id + "/" + id,
                                    type:"DELETE",
                                    success:function () {
                                        location.reload();
                                    }
                                })
                            }
                        });
                    } else {
                        //发送post请求,设为关注的好友
                        $.post("/users/addFriend", {userId: user.id, friendId: id}, function (data) {
                            if (data.success) {
                                $(document).dialog({
                                    closeBtnShow: true,
                                    content: '关注成功!',
                                    onClosed: function () {
                                        location.reload();
                                    }
                                });
                            }
                        })
                    }
                } else {
                    $(document).dialog({
                        type : 'confirm',
                        closeBtnShow: true,
                        content: '只有登录用户才可以进行关注,是否去登录页面??~(￣▽￣)~',
                        onClickConfirmBtn: function(){
                            location.href = "/login.html";
                        }
                    });
                }
            });
            //绑定私信按钮事件
            $("#letterBtn").click(function () {
                if(user){
                    //向服务器发送开启私信的请求
                    $.get("/letters/" + user.id + "/" + id,function (data) {
                        var user1 = JSON.stringify(data.user1);
                        var user2 = JSON.stringify(data.user2);
                        sessionStorage.setItem("user1",user1);
                        sessionStorage.setItem("user2",user2);
                        location.href = "mine/letter.html";
                    })
                }else {
                    $(document).dialog({
                        type : 'confirm',
                        closeBtnShow: true,
                        content: '发送私信需要登录喔 ( •̀ ω •́ )✧ 去登录吗?',
                        onClickConfirmBtn: function(){
                            location.href = "/login.html";
                        }
                    });
                }
            });
            //滚动翻页
            //当屏幕滚到最底部时执行函数
            $(window).scroll(function () {
                //判断是否到底部
                if (isEnd()) {
                    //判断是否有下一页
                    if (tabs[currentTab].currentPage < tabs[currentTab].pages) {
                        //设置当前页+1,并且发送ajax请求获取下一页数据
                        tabs[currentTab].currentPage++;
                        if (currentTab == 0){
                            console.log("游记");
                            $.get("/travels/listForUser/" + id, {currentPage: tabs[currentTab].currentPage}, function (data) {
                                $.merge(travels, data.list);
                                //渲染游记
                                renderView({list: travels},1);
                            });
                        }
                        if (currentTab == 1){
                            console.log("点评");
                            $.get("/users/" + id + "/comment",{currentPage:tabs[currentTab].currentPage},function (data) {
                                $.merge(comments, data.list);
                                //渲染点评
                                renderView({list: comments},2);
                            });
                        }
                    } else {
                        $(document).dialog({
                            type : "notice",
                            infoText: "到底了  QAQ",
                            autoClose: 1500,
                            position: "bottom"
                        });
                    }
                }
            });
        })
        function renderView(data,tab) {
            if (tab == 1){
                $("#travels").renderValues(data,{
                    handle:function (ele, value) {
                        ele.href = "/travelContent.html?id="+value;
                    }
                })
            }
            if (tab == 2){
                $("#comments").renderValues(data,{
                    handle:function (ele, value) {
                        ele.href="/strategyComment.html?id=" + value;
                    },
                    star:function (ele, value) {
                        $(ele).attr("star",value);
                    },
                    strategy:function (ele, value) {
                        ele.href="strategyCatalogs.html?strategyId=" + value;
                    }
                });
                //渲染小星星
                var stars = $(".comment-star");
                $.each(stars,function (index, ele) {
                    var star = $(ele);
                    var num = star.attr("star");
                    for (var i = 0;i < num ;i++) {
                        $("<i class=\"fa fa-star\"></i>").appendTo(star);
                    }
                    for (var i = 0;i < 5 - num ;i++) {
                        $("<i class=\"fa fa-star-o\"></i>").appendTo(star);
                    }
                })
            }
        }
    </script>
</head>
<body>
<div class="container bg" style="background-image: url(&quot;/img/user/bg.jpeg&quot;);">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span render-html="friends"></span>
                    </div>
                    <div>
                        <span>关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <span render-html="fans"></span>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div class="col">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn btn-success ibtn" id="followBtn">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
                <a class="nav-link" id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <dl class="list" render-loop="list">
                <dd>
                    <a render-key="list.id" render-fun="handle">
                        <img  render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>
                            <span class="span-right">
						 				<span>0</span> <i class="fa fa-thumbs-o-up"></i></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments">
            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" render-src="list.user.headImgUrl">
                    </div>
                    <div class="col">
                        <span class="comment-star" render-key="list.level" render-fun="star">
                            <!--小星星-->
                        </span>

                        <span class="comment-date" render-html="list.time"></span>
                        <div class="comment-content">
                            <a  render-key="list.id" render-fun="handle">
                                <p render-html="list.commentText"></p>
                            </a>
                        </div>
                        <ul class="comment-img" render-loop="list.imgUrls">
                            <li>
                                <img render-src="list.imgUrls.imgUrl">
                            </li>
                        </ul>

                        <div class="comment-link">
                            <a render-key="list.strategyId" render-fun="strategy">
                                <img render-src="list.strategyImg"> <span render-html="list.strategyTitle"></span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>

<div id="push"></div>
</body>
</html>